<template>
  <div class="map-folder-item">
    <div class="map-folder-item-wrapper">
      <Icon v-if="map.children && map.children.length > 0" class="map-folder-item-icon" v-bind:type="iconType" v-on:click="showChildren" />
      <div v-else style="width: 12px;"></div>
      <div class="map-folder-item-text cm-margin-left-3" v-bind:class="{ 'selected': map.id === selectedId }" v-on:click="selectHandler($event.target, map.id)">{{ map.name }}</div>      
    </div>
    <div class="map-folder-item-children" v-if="isChildrenShow && map.children">
      <map-folder-item v-for="(map, index) in map.children"
        v-bind:key="map.name + index"
        v-bind:map="map"
        v-bind:selected-id="selectedId"
        v-on:on-select="onSelect"></map-folder-item>
    </div>
  </div>
</template>

<script src="./mapFolderItem.js"></script>

<style lang="stylus">
@import './mapFolderItem.styl'
</style>
